<template>
    <div class="dy_list">
        <el-row class="title">
            <el-col :span="24"><div class="grid-content bg-purple"><h1>动态页列表</h1></div></el-col>
        </el-row>
        <el-row class="add">
            <el-col :span="24"><div class="grid-content bg-purple"><router-link to="/dynamic_add"><span>新增景点</span></router-link></div></el-col>
        </el-row>
        <el-row :gutter="0">
            <el-col :span="4"><div class="grid-content bg-purple">展现形式</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">图1</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">图2</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">图3</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">操作</div></el-col>
        </el-row>
        <el-row :gutter="0" type="flex" justify="space-around" v-for="(val, index) in dyList_cont" :key="index">
            <el-col :span="4"><div class="grid-content bg-purple"><div class="rule">{{arr[val.type_id-1]}}</div></div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple"><div class="photo"><img :src="baseUrl+val.img_url1" alt="" /></div></div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple"><div class="photo"><img :src="baseUrl+val.img_url2" alt="" /></div></div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple"><div class="photo"><img :src="baseUrl+val.img_url3" alt="" /></div></div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">
                <el-dropdown >
                    <el-button type="primary">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><div @click="edit">编辑</div></el-dropdown-item>
                        <el-dropdown-item><div @click="upData(val.orders)">上升</div></el-dropdown-item>
                        <el-dropdown-item><div @click="downData(val.orders)">下降</div></el-dropdown-item>
                        <el-dropdown-item><div @click="del(val.id)">删除</div></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div></el-col>
        </el-row>
    </div>
</template>

<script>
import config from '@/assets/js/config.js'
export default {
    created() {
        this.$require.get(config.dynamicList,{
            params: {
                page:this.page
            }
        }).then((res) => {
            console.log(res)
            this.dyList_cont = res.data.data.rows;
            console.log(this.dyList_cont)
        }).catch(function (err) {
            console.log("出错了")
        })
    },
    data() {
        return {
            page:0,
            dyList_cont: "",
            baseUrl:config.baseUrl,
            arr:["3列式","左大1右2小","左2小右大1"]
        }
    },
    methods: {
        //删除
        del(id){
      	 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	this.deleteRow(id);//调用删除接口
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        deleteRow(idx) {
            this.$submit.post(config.dynamicDelete,{
                id:idx
            }).then((res) => {
                console.log('删除成功',res)
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                });
                this.$require.get(config.dynamicList,{
                    params: {
                        page:this.page
                    }
                }).then((result) => {
                    console.log("重新请求数据",result)
                    this.dyList_cont = result.data.data.rows;
                })
            })
        },
        //上升
        upData(order){
            console.log("oeders",order)
            this.$submit.post(config.dynamicSort,{
                move:1,
                orders:order
            }).then((res) => {
                console.log("上传成功",res)
                this.$message({
                    type: 'success',
                    message: '上升成功!',
                });
                this.$require.get(config.dynamicList,{
                    params: {
                        page:this.page
                    }
                }).then((result) => {
                    console.log("重新请求数据",result)
                    this.dyList_cont = result.data.data.rows;
                })
            }).catch(function() {
                this.$message({
                    type: 'info',
                    message: '上升失败'
                }); 
            })
        },
        //下降
        downData(order){
            console.log("oeders",order)
            this.$submit.post(config.dynamicSort,{
                move:-1,
                orders:order
            }).then((res) => {
                console.log("上传成功",res)
                this.$message({
                    type: 'success',
                    message: '下降成功!',
                });
                this.$require.get(config.dynamicList,{
                    params: {
                        page:this.page
                    }
                }).then((result) => {
                    console.log("重新请求数据",result)
                    this.dyList_cont = result.data.data.rows;
                })
            })
        },
        edit(){
            
        }
    },
}
</script>

<style lang="scss" scoped>
    .dy_list{
        text-align: left;
        margin: 0 40px;
        padding-top: 20px;
        height: 100%;
        overflow: auto;
        .title{
            margin-bottom: 30px;
        }
        .add{
            margin-bottom: 20px;
            span{
                display: inline-block;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                border-radius: 5px;
                background: #6bace9;
            }
        }
        .el-row:nth-of-type(n+3){
            padding: 10px 0;
            border-bottom: 1px solid #ccc;

        }
        .rule{
            position: absolute;
            top:50%;
            left:0;
            transform: translate(0,-50%);
        }
        .el-col{
            position:relative;
            .el-dropdown{
                position: absolute;
                top:50%;
                left:0;
                transform: translate(0,-50%);
            }
        }
        .photo{
            position: relative;
            width: 45%;
            height: 0;
            padding-top: 70%;
            img{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                max-width: 100%;
                // max-height: 100%;
            }
        }
        
    }
</style>
